<html>
<head>
	
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

	<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
	<script type="text/javascript" src="../extjs/ext-all.js"></script>

</head>

<body><div id="estadosBr"></div></body>

	<script type="text/javascript">

	var estadosBrasileiros = [
	    {"id":'1', "nome":"Alagoas", "sigla":"AL"},
	    {"id":'2', "nome":"Acre", "sigla":"AC"},
	    {"id":'3', "nome":"Ceara", "sigla":"CE"}
	];

	Ext.define('Estado',{
		extend: 'Ext.data.Model',
		fields: ['id','nome','sigla']
	});
	
	Ext.define('EstadoStore',{
		extend: 'Ext.data.Store',
		model: 'Estado',
		data: estadosBrasileiros,
		proxy: {
			type: 'memory',
			format: 'json'
		}
	});
	
	Ext.onReady(function(){

		var store = Ext.create('EstadoStore');

		console.log(store.data.items);
		
		var tpl = Ext.create('Ext.XTemplate',
			'<h1>Estados Brasileiros:</h1>',
			'<tpl for=".">',
			'<p>{data.nome} - {data.sigla}</p>',
			'</tpl>'

		);
		tpl.overwrite('estadosBr',store.data.items);
		
    });
	</script>

</html>